<template>

    <div class="massage">
        <div class="massage-left">
            <div class="home-TUIKit-main">
                <div :class="env?.isH5 ? 'conversation-h5' : 'conversation'" v-show="!env?.isH5 || currentModel === 'conversation'">
                    <TUISearch class="search" />
                    <TUIConversation @current="handleCurrentConversation" />
                </div>
                <div class="chat" v-show="!env?.isH5 || currentModel === 'message'">
                    <TUIChat></TUIChat>
                </div>
                <TUICallKit :class="!showCallMini ? 'callkit-drag-container' : 'callkit-drag-container-mini'" :allowedMinimized="true" :allowedFullScreen="false" :beforeCalling="beforeCalling" :afterCalling="afterCalling" :onMinimized="onMinimized" :onMessageSentByMe="onMessageSentByMe" />
            </div>
        </div>
        <div class="massage-right">
            <div class="warehouse">
                <div class="outer">
                    <div class="title">商品库</div>
                    <div class="search">
                        <img class="icon" src="@/assets/search-icon.svg" alt="">
                        <input class="input" type="text" placeholder="请输入商品名称关键字查询">
                    </div>
                </div>
                <div style="height: 290px;overflow: auto;">
                    <div class="goods">
                        <div class="goods-items" v-for="(item,index) in list" :key="index">
                            <img class="goods-img" src="@/assets/vue.svg" alt="">
                            <div class="goods-right">
                                <div class="list-title">{{ item.name }}</div>
                                <div class="goods-info">
                                    <div>
                                        <div class="marr">商品编号：{{ item.number }}</div>
                                        <div class="marr">商品价格：¥{{ item.price }}</div>
                                    </div>
                                    <a-button type="primary" size="small">推送</a-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="warehouse" style="margin-top:24px">
                <div class="outer">
                    <div class="order">
                        <div class="order-list" :class="{'active':index===labelIndex}" v-for="(item,index) in selectData" :key="index" @click="handelTitle(index)">{{ item }}</div>
                    </div>
                </div>
                <div style="height: 335px;overflow: auto;">
                    <div class="goods">
                        <div class="goods-items flex-none" v-for="(item,index) in list" :key="index">
                            <div class="goods-flex logistics">
                                <div>2021-8-12 12:32</div>
                                <div>待发货</div>
                            </div>
                            <div class="goods-flex">
                                <img class="goods-img" src="@/assets/vue.svg" alt="">
                                <div class="goods-right">
                                    <div class="list-title">{{ item.name }}</div>
                                    <div class="goods-info">
                                        <div>
                                            <div class="marr">商品编号：{{ item.number }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
  
<script setup>
import { reactive, ref } from 'vue'
import { TUIEnv } from '@/TUIKit/TUIPlugin'
import { handleErrorPrompts } from '@/TUIKit/TUIComponents/container/utils'
const data = reactive({
    env: TUIEnv(),
    currentModel: 'conversation',
    showCall: false,
    showCallMini: false,
})
const list = ref([
    {
        name: '【95新】路易～威登经典老化棋盘格speedy25',
        number: 'JG384224233',
        price: '4565.23',
    },
    {
        name: '【95新】路易～威登经典老化棋盘格speedy25',
        number: 'JG384224233',
        price: '4565.23',
    },
    {
        name: '【95新】路易～威登经典老化棋盘格speedy25',
        number: 'JG384224233',
        price: '4565.23',
    },
    {
        name: '【95新】路易～威登经典老化棋盘格speedy25',
        number: 'JG384224233',
        price: '4565.23',
    },
])
const selectData = ref(['商品订单', '售后订单'])
const labelIndex = ref(0)
const TUIServer = window?.TUIKitTUICore?.TUIServer
const handleCurrentConversation = (value) => {
    data.currentModel = value ? 'message' : 'conversation'
}
//beforeCalling：在拨打电话前与收到通话邀请前执行
const beforeCalling = (type, error) => {
    if (error) {
        handleErrorPrompts(error, type)
        return
    }
    data.showCall = true
}
// afterCalling：结束通话后执行
const afterCalling = () => {
    data.showCall = false
    data.showCallMini = false
}
// onMinimized：组件切换最小化状态时执行
const onMinimized = (oldMinimizedStatus, newMinimizedStatus) => {
    data.showCall = !newMinimizedStatus
    data.showCallMini = newMinimizedStatus
}
// onMessageSentByMe：在整个通话过程内发送消息时执行
const onMessageSentByMe = async (message) => {
    TUIServer?.TUIChat?.handleMessageSentByMeToView(message)
    return
}

const handelTitle = (index) => {
    labelIndex.value = index
}
</script>
<style lang="less" scoped>
.massage {
    display: flex;
    margin: 24px 0 24px 0;
    padding: 0 24px;
    height: calc(100vh - 96px);
    &-left {
        flex: 13;
        margin-right: 24px;
    }
    &-right {
        flex: 3;
    }
}

.home-TUIKit-main {
    display: flex;
    height: 100%;
    overflow: hidden;
}
.search {
    padding: 12px;
}
.conversation {
    min-width: 248px;
    flex: 0 0 24%;
}
.conversation-h5 {
    flex: 1;
    border-right: 1px solid #f4f5f9;
}
.chat {
    flex: 1;
    height: 100%;
    position: relative;
    margin-left: 24px;
}
.callkit-drag-container {
    position: fixed;
    left: calc(50% - 25rem);
    top: calc(50% - 18rem);
    width: 50rem;
    height: 36rem;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.callkit-drag-container-mini {
    position: fixed;
    width: 168px;
    height: 56px;
    right: 10px;
    top: 70px;
}
.warehouse {
    background: #fff;
    height: calc( 100vh - 525px);
    //height: 408px;
    border-radius: 8px;
    .outer {
        padding: 0 16px;
    }
    .title {
        color: #2b3453;
        font-size: 14px;
        font-weight: bold;
        padding: 16px 0 12px 0;
    }
    .order {
        display: flex;
        padding: 16px 0 14px 0;
        &-list {
            color: #262e47;
            font-size: 14px;
            flex: 1;
            text-align: center;
            cursor: pointer;
            position: relative;
        }
        .active {
            font-weight: bold;
        }
        .active::after {
            content: '';
            width: 32px;
            height: 2px;
            background: #262e47;
            border-radius: 2px;
            position: absolute;
            left: 50%;
            bottom: -2px;
            transform: translate(-50%, 0);
        }
    }
    .search {
        padding: 8px 12px;
        background: #f4f6f8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .icon {
            width: 16px;
            height: 16px;
        }
        .input {
            font-size: 12px;
            outline: none;
            border: none;
            background: #f4f6f8;
            margin-left: 4px;
        }
        .input::placeholder {
            color: #9599a5;
        }
    }
    .goods {
        padding: 0 16px;
        &-items {
            padding: 12px;
            background: rgba(186, 231, 255, 0.2);
            border-radius: 8px 8px 8px 8px;
            display: flex;
            margin-bottom: 12px;
            .goods-img {
                width: 60px;
                height: 60px;
            }
            .goods-right {
                margin-left: 20px;
                .list-title {
                    color: #262e47;
                    font-size: 12px;
                    font-weight: bold;
                }
                .goods-info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    color: #262e47;
                    .marr {
                        margin-top: 4px;
                    }
                }
            }
        }
        .flex-none{
            display: block;
        }
        .goods-flex{
            display: flex;
        }
        .logistics{
            color: #262E47;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 8px;
        }
        &-items:last-child {
            margin-bottom: 0;
        }
    }
}
</style>